<template>
    <div class="no-list" @mouseenter="onmouseover" @mouseleave="onmouseout" @scroll="scroll">
        <div class="no-list-box" :style="{ transform: `translateY(${-scrollTop}px)` }">
            <div class="no-list-virtually" v-html="copyHtml" @click="clickCopy"></div>
            <div ref="noListRef" class="no-list-content">
                <div v-for="(item, index) in veracityList" :key="'item-' + index" :data-index="index" class="no-list-item"
                    @click="clickItem(index)">
                    <RenderCom v-if="item.render" :render="item.render" :data="item" />
                    <template v-else>
                        {{ item.label }}
                    </template>
                </div>
            </div>
            <div class="no-list-virtually" v-html="copyHtml" @click="clickCopy"></div>
        </div>
    </div>
</template>
<script setup lang="tsx">
import { onBeforeMount, onMounted, ref, computed } from 'vue';
import RenderCom from '@/components/RenderCom.vue'

type veracityListType = {
    value: string
    label: string
    render: unknown
}
const isDev = process.env.NODE_ENV === 'development'
const sessionSpeedKey = 'DEV-LIST-LAST-SPEED'

const props = defineProps({
    // 1s的速度
    speed: { type: Number, default: 80 }
})

const veracityList = ref<veracityListType[]>([])
const copyHtml = ref<string>('')
const listHeight = ref(100)
const scrollTop = ref(0)
// const listHeight = ref(0)
const frameFun = ref()
const noListRef = ref<HTMLDivElement | null>(null)
const secondFrame = ref(0)
const lastFrame = ref(0)
veracityList.value = new Array(30).fill(null).map((_, index) => {
    return {
        value: index + '',
        label: index + '',
        render: undefined
    }
})
veracityList.value = veracityList.value.map((item) => {
    const render = (_, data) => {
    // console.log('props', data);
    return <div>{data.data.value + '1'}</div>
}
return {
    ...item,
    render
}
})
const frameSpeed = computed(() => {
    const speed = secondFrame.value ? (props.speed * secondFrame.value / 1000) : 0.45
    return speed
})
onMounted(() => {
    console.log('isDev', isDev);
    if (isDev) {
        const speed = sessionStorage.getItem(sessionSpeedKey)
        if (speed) secondFrame.value = parseInt(speed)
        console.log('mounted', speed);
    }
    copyHtml.value = noListRef.value?.innerHTML || copyHtml.value
    listHeight.value = noListRef.value?.offsetHeight || listHeight.value
    onScrollTop(0)
})
onBeforeMount(() => {
    if (isDev) {
        sessionStorage.setItem(sessionSpeedKey, secondFrame.value.toString())
    }
    cancelAnimationFrame(frameFun.value)
})
requestAnimationFrame((s) => {
    console.log('s', s);
})
const onScrollTop = (time: number) => {
    // 用前一秒统计出帧率
    if (time !== 0 && time < 1000) {
        secondFrame.value = time - lastFrame.value
        lastFrame.value = time
    }
    scrollTop.value += frameSpeed.value
    if (scrollTop.value >= listHeight.value) scrollTop.value = 0
    frameFun.value = requestAnimationFrame(onScrollTop)
}
const onmouseover = (e: MouseEvent) => {
    console.log('onmouseover', e);

    cancelAnimationFrame(frameFun.value)
}
const onmouseout = (e: MouseEvent) => {
    console.log('onmouseout', e);

    onScrollTop(0)
}
const clickItem = (index: number) => {
    console.log('clickItem', index, veracityList.value[index]);
}
const clickCopy = (e) => {
    const index = e.target?.dataset?.index
    clickItem(index)
}
const scroll = (e: MouseEvent) => {
    console.log('scroll', e);
}
</script>
<style lang="scss" scoped>
.no-list {
    height: 400px;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.1);
    .no-list-box {
        position: relative;
    }
    .no-list-virtually {
        width: 100%;
        position: absolute;
        &:first-of-type{
            top: -100%;
        }
        &:last-of-type{
            bottom: -100%;
        }
    }
}
</style>